<template>
  <div class="maniger">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>行政管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <div id="left">
      <div class="title1">部门权限{{ ruleForm.parttitle1 }}</div>
      <!-- 部门权限新增 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="部门名称" prop="partname">
          <el-select v-model="ruleForm.partname" placeholder="请选择部门" @change="chosepart1(ruleForm.partname)"
            :disabled="ruleForm.parttitle1 == '修改'" id="color1">
            <el-option v-for="item in department" :key="item.DepartmentId" :label="item.Department"
              :value="item.Departlevel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门权限层级" prop="level">
          <el-input id="input" v-model="ruleForm.level" placeholder="请输入部门等级" disabled></el-input>
        </el-form-item>
        <el-form-item label="新增权限" prop="new" v-if="ruleForm.parttitle1 == '新增'">
          <el-input v-model="ruleForm.new"></el-input>
        </el-form-item>
        <el-form-item label="修改权限" prop="type" v-if="ruleForm.parttitle1 == '修改'">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox v-for="(item1, index) in power" :key="index" :label="item1.title" name="type">
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button class="submitbtn" type="primary" @click="submitForm('ruleForm')">{{ ruleForm.parttitle1 }}
          </el-button>
          <el-button class="submitbtn" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="backcolor">
      <div id="right1">
        <div class="title1">修改员工权限</div>
        <el-form :model="form" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
          <el-form-item label="员工工号" prop="workernum">
            <el-select v-model="form.workernum" placeholder="请选择" @change="choseuser(form.workernum)"
              :disabled="form.jobflag" id="color13">
              <el-option v-for="item2 in user" :key="item2.UserId" :label="item2.UserGH" :value="item2.UserGH">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名" prop="realname">
            <el-input v-model="form.realname" @blur="getusergh(form.realname, 'ruleForm1')" :disabled="form.jobflag"
              id="color12"></el-input>
          </el-form-item>
          <el-form-item label="职位选择" prop="chose">
            <el-select v-model="form.chose" placeholder="请选择职位">
              <el-option v-for="item1 in position" :key="item1.PositionId" :label="item1.Position"
                :value="item1.PositionId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门选择" prop="chosepart">
            <el-select v-model="form.chosepart" placeholder="请选择部门">
              <el-option v-for="item in department" :key="item.DepartmentId" :label="item.Department"
                :value="item.DepartmentId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="submitbtn" type="primary" @click="submitForm1('ruleForm1')">修改</el-button>
            <el-button class="submitbtn" @click="resetForm1('ruleForm1')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {//部门权限
                parttitle1: '新增',
                partname: '',
                new: '',
                level: '',
                type: ['部门管理'],//所选权限的名字
            },
            rules: {
                new: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                partname: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                level: [
                    { required: true, message: '请选择部门等级', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ]
            },
            rules1: {
                workernum: [
                    { required: true, message: '请选择员工工号', trigger: 'change' }
                ],
                 realname: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' },
                ],
                chose: [
                    { required: true, message: '请选择职位', trigger: 'change' }
                ],
                chosepart: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
            },
            form: {
                workernum: '',
                realname: '',
                chose: '',
                chosepart: '',
                jobflag:false,//职位更改节流阀
            },
            department: [],//部门信息
            power: [],//权限信息
            position: [],//获取所有职位信息
            user:[],//获取所有员工信息
            
        }
    },
    methods: {
        submitForm(formName) {//部门权限修改
            var that = this;
            var partjlf = this.ruleForm.parttitle1;//修改，新增截留筏
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (partjlf == '新增') {
                        var obj = {//新增请求数据
                            newpower: this.ruleForm.new,
                            level: this.ruleForm.level
                        }
                        this.$axios({
                            method: 'post',
                            url: '/add_power',
                            data: obj
                        }).then(function (res) {
                            if (res.data.state == 1) {
                                alert('新建成功')
                                that.resetForm(formName);
                            }
                        })
                    } else {//修改接口，先删除在添加
                        var obj1 = this.ruleForm;//修改请求数据
                        var arrtype = [];
                        for (let i = 0; i < this.power.length; i++) {
                            for (let j = 0; j < this.ruleForm.type.length; j++) {
                                if (this.power[i].title == this.ruleForm.type[j]) {
                                    arrtype[arrtype.length] = this.power[i];
                                }
                            }
                        }
                        obj1.typeurl = arrtype;
                        this.$axios({
                            method: 'post',
                            url: '/updatepower',
                            data: obj1
                        }).then(function (res) {
                            if (res.data.state == 1) {
                                alert('修改成功');
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {//部门信息重置
            this.$refs[formName].resetFields();
        },
        chosepart1(v) {//部门层级赋值
            this.ruleForm.level = v;
        },
        getPartdata() {//获取部门信息
            var that = this;
            this.$axios.get('/allpart').then(function (res) {
                that.department = res.data.data;
            })
        },
        getallpower() {//获取所有权限数据
            var that = this;
            this.$axios.get('/allpower').then(function (res) {
                that.power = res.data.data;
            })
        },
        getpositiondata(){//获取所有职位信息
        var that=this;
        this.$axios.get('/allposition').then(res=>{
            that.position=res.data.data;
        })
        },
        getalluser(){//获取所有员工信息
        var that=this;
        this.$axios.get('/alluser').then(res=>{
            that.user=res.data.data;
        })
        },
        submitForm1(formName) {//员工权限修改
            this.$refs[formName].validate((valid) => {
                if (valid) {//验证
                    var job={}
                    job.UserGH=this.form.workernum;
                    job.positionid=this.form.chose;
                    job.part=this.form.chosepart;
                    this.$axios({
                        method:'post',
                        url:'/updatejob',
                        data:job
                    }).then(function(res){
                        if (res.data.state==1) {
                            alert('修改成功');
                            that.form.workernum = ""
              that.form.realname = ""
              that.form.chose = ""
              that.form.chosepart = ""
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm1(formName) {//员工信息重置
            this.$refs[formName].resetFields();
        },
        choseuser(v){//根基员工账号，确定员工姓名
            this.user.forEach(item=>{
                if (item.UserGH==v) {
                    this.form.realname=item.UserName;
                    return;
                }
            })
        },
        getusergh(v,formName){//根据员工姓名确定员工账号
        var UserNamejlf=true;//判断输入的员工是否存在
            this.user.forEach(item=>{
                if (item.UserName==v) {
                    this.form.workernum=item.UserGH;
                    return;
                }
            })
            UserNamejlf=this.user.some(item=>{
               return item.UserName==v
            })
            console.log(UserNamejlf,formName);
            if (!UserNamejlf) {
                this.resetForm1(formName);
                alert('没有该员工，请重新输入');
            }
        },
    },
    created() {
        this.getPartdata();
        this.getallpower();
        this.getpositiondata();
        this.getalluser();
        if (this.$route.query.level) {//修改部门赋值
            var that = this;
            this.ruleForm.parttitle1 = '修改';
            this.ruleForm.partname = this.$route.query.part;
            this.ruleForm.level = this.$route.query.level;
            this.$axios.get(`/chosepower?level=${this.$route.query.level}`).then(function (res) {
                var arr = res.data.data
                that.ruleForm.type = arr.map(item => {
                    return item.title
                })
            })
        }
        if (this.$route.query.UserGH) {//员工权限修改
            this.form.workernum=this.$route.query.UserGH;
            this.form.realname=this.$route.query.UserName;
            this.form.chose=this.$route.query.position;
            this.form.chosepart=this.$route.query.part;
            this.form.jobflag=true;
        }
    },

}
</script>

<style>
.maniger {
  width: 100%;
  /* display: flex;
    justify-content: space-around; */
}

#left {
  width: 40%;
  padding: 40px 20px 40px 0px;
  /* border: 1px solid black; */
  /* background: #FCE8B0; */
  border-radius: 10px;
}

#left #input {
  color: #000;
}

#left #color1 {
  color: #000;
}

.title1 {
  font-size: 22px;
  font-weight: 600;
  margin: 10px;
  margin-bottom: 30px;
}

#backcolor #color12,
#backcolor #color13 {
  color: #000;
}

/* 下拉框 */
.el-select {
  display: inline-block;
  position: relative;
  width: 100%;
}

#right1 {
  width: 70%;
  padding: 40px 20px 40px 0px;
  margin: 50px auto;
}

#backcolor {
  width: 45%;
  height: 100%;
  background-color: #c4c7da;
  position: fixed;
  top: 105px;
  right: 10px;
  text-align: center;
}

.submitbtn {
  margin: 10px 40px 10px 20px;
}
</style>